<template>
  <div ref="chartDom" :style="{ width: '100%', height: '400px' }"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, watch } from 'vue'

// 接收传入的开始年份和结束年份
const props = defineProps({
  startYear: {
    type: Number,
    required: true
  },
  endYear: {
    type: Number,
    required: true
  }
})

const chartDom = ref()
let chart

const initChart = (filteredData) => {
  chart = echarts.init(chartDom.value)
  chart.setOption({
      title: {
          text: `年度课时消费统计 (${props.startYear} - ${props.endYear})`,
          left: 'center'
      },
      tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
      },
      legend: {
        left: 'right',
        top: 'bottom',
        orient: 'vertical',
    },
      xAxis: {
          name: '年份',
          type: 'category',
          data: filteredData.years, 
          axisLabel: {
          interval: 0,
          }
      },
      yAxis: [
        {
            name: '课消次数',
            type: 'value',
            position: 'left',
        },
        {
            name: '课消金额 (元)',
            type: 'value',
            position: 'right',
        },
      ],
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: {
              show: true,
              type: ['line', 'bar'],
          },
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      grid: {
        left: '3%',
        right: '15%',
        bottom: '3%',
        containLabel: true
      },
      series: [
        {
            name: '张老师课消次数',
            type: 'bar',
            data: filteredData.teachersData.zhangTeacher.counts,
        },
        {
            name: '张老师课消金额',
            type: 'line',
            yAxisIndex: 1,
            data: filteredData.teachersData.zhangTeacher.amounts,
            lineStyle: {
                width: 2,
            },
            symbol: 'circle',
            symbolSize: 8,
        },
        {
            name: '李老师课消次数',
            type: 'bar',
            data: filteredData.teachersData.liTeacher.counts,
        },
        {
            name: '李老师课消金额',
            type: 'line',
            yAxisIndex: 1,
            data: filteredData.teachersData.liTeacher.amounts,
            lineStyle: {
                width: 2,
            },
            symbol: 'circle',
            symbolSize: 8,
        },
        {
            name: '王老师课消次数',
            type: 'bar',
            data: filteredData.teachersData.wangTeacher.counts,
        },
        {
            name: '王老师课消金额',
            type: 'line',
            yAxisIndex: 1,
            data: filteredData.teachersData.wangTeacher.amounts,
            lineStyle: {
                width: 2,
            },
            symbol: 'circle',
            symbolSize: 8,
        },
        {
            name: '赵老师课消次数',
            type: 'bar',
            data: filteredData.teachersData.zhaoTeacher.counts,
        },
        {
            name: '赵老师课消金额',
            type: 'line',
            yAxisIndex: 1,
            data: filteredData.teachersData.zhaoTeacher.amounts,
            lineStyle: {
                width: 2,
            },
            symbol: 'circle',
            symbolSize: 8,
        },
        {
            name: '孙老师课消次数',
            type: 'bar',
            data: filteredData.teachersData.sunTeacher.counts,
        },
        {
            name: '孙老师课消金额',
            type: 'line',
            yAxisIndex: 1,
            data: filteredData.teachersData.sunTeacher.amounts,
            lineStyle: {
                width: 2,
            },
            symbol: 'circle',
            symbolSize: 8,
        },
      ]
  })
}

const filterDataByYearRange = (startYear, endYear) => {
  // 模拟过滤后的年度数据
  const allData = {
    2024: {
      zhangTeacher: {
        counts: 155,
        amounts: 42086
      },
      liTeacher: {
        counts: 146,
        amounts: 35853
      },
      wangTeacher: {
        counts: 164,
        amounts: 51900
      },
      zhaoTeacher: {
        counts: 165,
        amounts: 44852
      },
      sunTeacher: {
        counts: 171,
        amounts: 44325
      }
    },
    2023: {
      zhangTeacher: {
        counts: 149,
        amounts: 44298
      },
      liTeacher: {
        counts: 156,
        amounts: 43096
      },
      wangTeacher: {
        counts: 162,
        amounts: 45708
      },
      zhaoTeacher: {
        counts: 149,
        amounts: 31732
      },
      sunTeacher: {
        counts: 160,
        amounts: 42677
      }
    },
    2022: {
      zhangTeacher: {
        counts: 159,
        amounts: 43490
      },
      liTeacher: {
        counts: 156,
        amounts: 41729
      },
      wangTeacher: {
        counts: 148,
        amounts: 25454
      },
      zhaoTeacher: {
        counts: 162,
        amounts: 40562
      },
      sunTeacher: {
        counts: 174,
        amounts: 42605
      }
    },
    2021: {
      zhangTeacher: {
        counts: 157,
        amounts: 44525
      },
      liTeacher: {
        counts: 169,
        amounts: 45959
      },
      wangTeacher: {
        counts: 154,
        amounts: 48577
      },
      zhaoTeacher: {
        counts: 164,
        amounts: 46619
      },
      sunTeacher: {
        counts: 171,
        amounts: 44338
      }
    },
    2020: {
      zhangTeacher: {
        counts: 184,
        amounts: 46915
      },
      liTeacher: {
        counts: 164,
        amounts: 44592
      },
      wangTeacher: {
        counts: 182,
        amounts: 53030
      },
      zhaoTeacher: {
        counts: 156,
        amounts: 43286
      },
      sunTeacher: {
        counts: 165,
        amounts: 40655
      }
    }
  }

  const years = []
  const teachersData = {}

  for (let year = startYear; year <= endYear; year++) {
    if (allData[year]) {
      years.push(year)
      for (const teacher in allData[year]) {
        if (!teachersData[teacher]) {
          teachersData[teacher] = { counts: [], amounts: [] }
        }
        teachersData[teacher].counts.push(allData[year][teacher].counts)
        teachersData[teacher].amounts.push(allData[year][teacher].amounts)
      }
    }
  }

  return { years, teachersData }
}

watch(() => [props.startYear, props.endYear], ([newStartYear, newEndYear]) => {
  const filteredData = filterDataByYearRange(newStartYear, newEndYear)
  initChart(filteredData)
})

onMounted(() => {
  const filteredData = filterDataByYearRange(props.startYear, props.endYear)
  initChart(filteredData)
})
</script>

<style scoped>
/* Add any specific styles here */
</style>
